<template>
    <el-table :data="RoleList" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }" stripe border>
        <el-table-column prop="id" type="selection" width="55" fixed="left" />
        <el-table-column prop="id" label="编号" width="80" fixed="left" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="label" label="标识" />
        <el-table-column prop="departmentName" label="备注" />
        <el-table-column prop="createTime" label="创建时间" width="200" />
        <el-table-column prop="updateTime" label="更新时间" width="200" />
        <el-table-column label="操作" fixed="right" width="150">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

                <el-popconfirm title="您确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消"
                    @confirm="handleDelete(scope.$index, scope.row)">
                    <template #reference>
                        <el-button size="small" type="danger">Delete</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <RoleDrawer ref="drawer" :row="oRow"></RoleDrawer>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import { getRoleList } from '@/api'
import { IUserList } from "@/types";
import RoleDrawer from './components/RoleList.vue'


let RoleList = ref<IUserList[]>([]);
let drawer = ref(null);
let oRow = ref(null);

onBeforeMount(async () => {
    let {
        data: {
            data: { list, pagination },
        },
    } = await getRoleList();
    RoleList.value = list;
    console.log(list);
    console.log(pagination);


});


const handleEdit = (index: number, row: any) => {
    console.log(index, row);

    console.log(drawer);
    oRow.value = { ...row };
    drawer.value.visible = true;
};
const handleDelete = (index: number, row: any) => {
    console.log(index, row);
};
</script>

<style scoped></style>
